<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>后台管理系统</title>
    <script src="../../resources/app/all.js" type="text/javascript"></script>
    <style type="text/css">
        a:link {
            text-decoration: none;
        }

        a:visited {
            text-decoration: none;
        }

        a:hover {
            text-decoration: none;
        }

        a:active {
            text-decoration: none;
        }

        .layui-tab-item {
            height: 101%;
        }

        .layui-tab-title li:first-child i.layui-tab-close:first-child {
            display: none !important;
        }
    </style>

    <script>
        var user = ToolUtil.UserData().user;
        $(document).ready(function () {
            $("#userName").html(user.realName);
            init();
        });

        function init() {
            ToolUtil.Http({
                url: global.api_url + '/sys/sysPermission/list/getUserList',
                type: 'GET',
                contentType: 'application/json;charset=UTF-8',
                async: false,
                success: function (obj) {
                    if (obj && obj.code === '00') {
                        $('#menu').html('');
                        $('#menu').html(formatMenu(obj.data));
                    } else if (obj.code === '98' || obj.code === '97') {
                        location.href = global.loginUrl;
                    } else {
                        layer.alert(obj.msg, {icon: 5});
                    }
                }
            });

        }

        function formatMenu(data) {
            var html = '';
            if (data != null) {
                for (var i = 0; i < data.length; i++) {
                    if (data[i].parentId === 0) {
                        if (i == 0) {
                            html += ' <li class="layui-nav-item layui-nav-itemed">';
                        } else {
                            html += ' <li class="layui-nav-item ">';
                        }
                        html += '<a class=""  href="javascript:;">' + data[i].name + '</a>';
                        html += ' <dl class="layui-nav-child">';
                        for (var j = i; j < data.length; j++) {
                            if (data[j].parentId === data[i].id) {
                                html += ' <dd><a class="site-demo-active"  data-id="' + data[j].id + '" data-title="' + data[j].name + '" data-type="tabAdd" href="javascript:;" data-url="' + data[j].url + '">' + data[j].name + '</a></dd>';
                            }
                        }
                        html += '</dl>';
                        html += ' </li>';
                    }
                }
            }
            return html;
        }

        function setIframeHeight(iframe) {
            if (iframe) {
                var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
                if (iframeWin.document.body) {
                    iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
                }
            }
        }
    </script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">

    <div class="layui-header">
        <div class="layui-logo">后台管理系統</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <!--         <ul class="layui-nav layui-layout-left">-->
        <!--             <li class="layui-nav-item"><a href="">控制台</a></li>-->
        <!--             <li class="layui-nav-item"><a href="">商品管理</a></li>-->
        <!--             <li class="layui-nav-item"><a href="">用户</a></li>-->
        <!--             <li class="layui-nav-item">-->
        <!--                 <a href="javascript:;">其它系统</a>-->
        <!--                 <dl class="layui-nav-child">-->
        <!--                     <dd><a href="">邮件管理</a></dd>-->
        <!--                     <dd><a href="">消息管理</a></dd>-->
        <!--                     <dd><a href="">授权管理</a></dd>-->
        <!--                 </dl>-->
        <!--             </li>-->
        <!--         </ul>-->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"
                         class="layui-nav-img">
                    <span id="userName"></span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a id="editUser">基本资料</a></dd>
                    <dd><a href="" id="logout">安全退出</a></dd>
                </dl>
            </li>
            <!--            <li class="layui-nav-item"><a href="" id="logout">安全退出</a></li>-->
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul id="menu" class="layui-nav layui-nav-tree">
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <div class="layui-tab" lay-allowClose="true" lay-filter="demo" style="height: 95%">
            <ul class="layui-tab-title">
            </ul>
            <div class="layui-tab-content" style="height: 99%">
            </div>
        </div>
    </div>

    <div class="layui-footer" align="right">
        © wangkai869@foxmail.com
    </div>
</div>
<script>
    var active;
    layui.use(['element', 'layer'], function () {
        var element = layui.element
            , layer = layui.layer;
        active = {
            tabAdd: function (url, id, name) {
                if (url.toLowerCase().indexOf('http')!=-1) {
                    element.tabAdd('demo', {
                        title: name,
                        content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:100%" ></iframe>',
                        id: id
                    });
                } else {
                    element.tabAdd('demo', {
                        title: name,
                        content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="/develop/admin' + url + '" style="width:100%;height:100%" ></iframe>',
                        id: id
                    });
                }
                element.render('tab');
            },
            tabChange: function (id) {
                element.tabChange('demo', id);
            },
            tabDelete: function (id) {
                element.tabDelete("demo", id);//删除
            }
            , tabDeleteAll: function (ids) {//删除所有
                $.each(ids, function (i, item) {
                    element.tabDelete("demo", item);
                })
            }
        };
        active.tabAdd("/home/welcome.html", "10000", "首页");
        active.tabChange("10000");
        $('.site-demo-active').on('click', function () {
            var dataid = $(this);
            // active.tabDelete(dataid.attr("data-id"));
            if ($(".layui-tab-title li[lay-id]").length <= 0) {
                active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
            } else {
                var isData = false;
                $.each($(".layui-tab-title li[lay-id]"), function () {
                    if ($(this).attr("lay-id") == dataid.attr("data-id")) {
                        isData = true;
                    }
                });
                if (isData == false) {
                    active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
                }
            }
            active.tabChange(dataid.attr("data-id"));
        });
        $('#editUser').on('click', function () {
            layer.open({
                type: 2,
                title: '基本资料',
                maxmin: false,
                data: {
                    id: user.id,
                    act: "edit",
                    data: user
                },
                shadeClose: false, // 点击遮罩关闭层
                // area: ['800px', '600px'],
                area: ['40%', '50%'],
                content: 'edit.html'
            });
        });
        $('#logout').on('click', function () {
            ToolUtil.Http({
                url: global.api_url + '/admin/home/logout',
                type: 'GET',
                async: false,
                success: function (obj) {
                    if (obj && obj.code === '00') {
                        store.clear();
                        location.href = global.loginUrl;
                    } else {
                        layer.alert(obj.msg, {icon: 5});
                    }
                }
            });
        });
        element.on('tab(demo)', function () {
            layer.closeAll();
            location.hash = 'test1=' + this.getAttribute('lay-id');
        });
        element.on('tabDelete(demo)', function (data) {
            let layId = $(this).parent().attr("lay-id");
            if (layId === undefined) {
                layId = data.elem.selector.split('"')[1];
            }
            if (layId === "111111") {
                store.remove("dictInfo");
            }
        });


        $(".layui-tab-title").contextmenu(function (ev) {
            let layId = ev.toElement.getAttribute("lay-id");
            active.tabChange(layId);
            if (layId === "10000") {
                layer.tips('<ul>\n' +
                    '                <li ><a lay-id="' + layId + '" onclick="operation(this,1)">刷新当前</a></li>\n' +
                    '                <li ><a lay-id="' + layId + '" onclick="operation(this,3)">关闭其他</a></li>\n' +
                    '                <li ><a lay-id="' + layId + '" onclick="operation(this,4)">关闭所有</a></li>\n' +
                    '        </ul>', '.layui-tab-title .layui-this', {
                    tips: [2, '#FFFFFF'],
                    time: 10000
                });
            } else {
                layer.tips('<ul >\n' +
                    '                <li ><a lay-id="' + layId + '" onclick="operation(this,1)">刷新当前</a></li>\n' +
                    '                <li ><a lay-id="' + layId + '" onclick="operation(this,2)">关闭当前</a></li>\n' +
                    '                <li ><a lay-id="' + layId + '" onclick="operation(this,3)">关闭其他</a></li>\n' +
                    '                <li ><a lay-id="' + layId + '" onclick="operation(this,4)">关闭所有</a></li>\n' +
                    '        </ul>', '.layui-tab-title .layui-this', {
                    tips: [2, '#FFFFFF'],
                    time: 10000
                });
            }
            return false;
        });
        $("#menu li").on('click', function () {
           let objs= $(this).siblings("li");
            for(let i=0;i<objs.length;i++){
                $(objs[i]).removeClass("layui-nav-itemed");
            }
        });


    });


    function operation(ev, opt) {
        layer.closeAll();
        let thisLayId = ev.getAttribute("lay-id");
        if (opt === 1) {
            $('.layui-tab-content .layui-show iframe').attr('src', $('.layui-tab-content .layui-show iframe').attr('src'));
        }
        if (opt === 2) {
            active.tabDelete(thisLayId);
        }
        if (opt === 3 || opt === 4) {
            let data = [];
            $.each($(".layui-tab-title li[lay-id]"), function () {
                let layId = $(this).attr("lay-id");
                if (layId != "10000") {
                    if (opt === 3 && thisLayId != layId) {
                        data.push(layId);
                    }
                    if (opt === 4) {
                        data.push(layId);
                    }
                }
            });
            active.tabDeleteAll(data);
        }
    }

</script>
</body>
</html>